<!-- 使用方法 -->

<!-- <custom-navi :back="true" title="自定义导航" color="red" bgColor="#f8f8f8"></custom-navi> -->

<template>
    <view class="head">
        <view class="l-box-pf-t w100" :style="{backgroundColor:bgColor,paddingTop: statusBarHeight,'z-index':'999'}">
            <view class="l-fjb" :style="{height:naviBarHeight,lineHeight: naviBarHeight,backgroundColor:bgColor,color:color}">
				<template>
					<!-- 左边 -->
					<view class="left l-f1 h100 l-fc o-pl-s">
						<view class="l-fc" @click="$Function.LinkTo('','Back')" v-if="back">
							<!-- #ifdef APP-PLUS || H5-->
							<i class="icon" style="color: rgb(0, 0, 0);font-size: 27px;"></i>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
								<text class="iconfont icon-fanhui" style="color: rgb(0, 0, 0);font-weight: 650;font-size: 15px;"></text>
							<!-- #endif -->
						</view>
					</view>
					<!-- 中间 -->
					<view class="centre l-f3 h100">
						<!-- 标题 -->
						<view class="o-plr c-line-1 c-tc c-t8">{{title}}</view>
						
					</view>
					<!-- 右边 -->
					<view class="right l-f1 h100 o-pr-s"></view>
				</template>
                
            </view>
        </view>
        <view :style="{height:titleHeight}"></view>

    </view>
</template>

<script>
	import Function from '@/common/function.js';
    export default {
        name: "IndexHeader",
		// props 父组件不传，布尔默认为false，字符串默认为空
        props: [
            'back',  //是否显示箭头
			'title',  //标题
			'bgColor', //背景颜色
			'color',  //head的字体颜色
			'inputBg', //input背景颜色
        ],
        data () {
            return {
                value: '',
				titleHeight: '',
				naviBarHeight: '',
				statusBarHeight: '',
            }
        },
		
		created() {
			let storageHeight = uni.getStorageSync('systemInfo');
			//总高度
			this.titleHeight = storageHeight.titleHeight+'px';
			//导航栏搞得
			this.naviBarHeight = storageHeight.naviBarHeight+'px';
			// 状态栏高度
			this.statusBarHeight = storageHeight.statusBarHeight+'px'
			console.log(storageHeight)
		},
        methods: {
            
        }
    }
</script>


<style>
	.status_bar {
		width: 100%;
	}
</style>

<style lang="scss" scoped>
	@import '@/common/iconfont/iconfont.css';
    .head{
		.icon{
			display: inline-block;
			font: normal normal normal 14px/1 unibtn;
			font-size: inherit;
			text-rendering: auto;
			-webkit-font-smoothing: antialiased;
		}
	}
    
</style>
